import { useState } from 'react';
import type { FC } from 'react';
import { CloseSquareOutlined, UpSquareOutlined, DownSquareOutlined} from '@ant-design/icons';
import { Card } from 'antd';
import styles from './HomeTop.less'
import HomeTopInfo from './components/HomeTopInfo'
import imgSrc from '@/../public/icon.png'
const HomeTop: FC = () => {
  const [isShowTopCard, setShowTopCard] = useState(true)
  const [isShowTopContent, setShowTopContent] = useState(true)
  // 定义首页顶部数据
  const [homeTopInfoObj] = useState([
    {
      icon: imgSrc,
      title: 'mimo',
      subtitle: '订购于2021.03.16',
      desc: '项目描述'
    },
    {
      icon: imgSrc,
      title: '智能基站节能',
      subtitle: '订购于2021.03.16',
      desc: '项目描述'
    },
  ])


  const showTopCard = () => {
    setShowTopCard(false)
  }
  const showTopContent = () => {
    setShowTopContent(!isShowTopContent)
  }
  const rightCorner = () => {
    return (
      <>
        {
          isShowTopContent ? <UpSquareOutlined className={ styles.rightCornerButton } onClick={showTopContent}/>
          : <DownSquareOutlined className={ styles.rightCornerButton } onClick={showTopContent}/>
        }
        <CloseSquareOutlined className={styles.rightCornerButton} style={ {marginLeft: '4px'} }onClick={showTopCard}/>
      </>
    )
  }
  const topCardTitle = () => {
    return (
      <>
        <div className={styles.topCardTitle}>欢迎使用网优天线能效平台！</div>
      </>
    )
  }
  const renderComponentContent = () => {
    return isShowTopContent ? (<div className='topCardContent'>
            <p>
              
            欢迎使用数据汇聚系统！在这里，各个省、专业公司AI运营数据上报人员可以将原始运营数据导入，包括应用信息数据、能力使用数据、应用调用量数据、平台数据等。系统按口径处理数据，最终生成可导出的运营数据，用于技术中台可视化展示。
            </p>
      <HomeTopInfo data={homeTopInfoObj}/>
          </div>) : null
          
  }
  const renderComponent = () => {
    return isShowTopCard ?
        <Card className={`${styles['card-box']}`} title={topCardTitle()} extra={rightCorner()} bordered={false}>
        {renderComponentContent()}
        </Card> : null
  }
  return (
    <>
      {
        renderComponent()
      }
    </>
  )
}

export default HomeTop